<template>
    <view class="info ph-32 pv-32">
        <view class="fs-36 fw-600 text-color4">成都猫屋犬舍·活体宠物猫狗小市（武侯区店）</view>
        <view class="f ai-c jc-s-b mt-24">
            <view class="f ai-c">
                <view class="f">
                    <image :src="index < rate - 1 ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                </view>
                <view class="fs-28 fw-600 text-color9 ml-12">4.2</view>
                <view class="fs-28 fw-600 text-color4 ml-32">¥68/人</view>
            </view>
            <view class="f">
                <view class="fs-28 text-color3">收藏数</view>
                <view class="fs-28 fw-600 text-color4 ml-8">561</view>
            </view>
        </view>
        <view class="banner w-f mt-32">
            <u-swiper :list="list" height="180" radius="12" @change="getCurrentNum" :autoplay="false" indicatorStyle="right: 20px">
                <template v-slot:indicator>
                    <view class="current-num w-73 h-40 f ai-c jc-c">
                        <text class="fs-24 fw-600 text-color5">{{ currentNum + 1 }}/{{ list.length }}</text>
                    </view>
                </template>
            </u-swiper>
        </view>
        <view class="f ai-f-s jc-s-b mt-34 pb-36 time">
            <view class="f fd-c f1 mr-36">
                <view>
                    <text class="fs-26 text-color3">营业时间：</text>
                    <text class="fs-26 text-color4">周一至周六 10:00-14:00/16:00-20:00</text>
                </view>
                <view class="f mt-12 fc-w">
                    <view class="h-30 ph-8 b-4 type mr-8 fs-22" v-for="(item, index) in 3" :key="index">食品</view>
                </view>
            </view>
            <view class="f fd-c ai-c">
                <image src="http://cwht.ricecs.cn/app/shop/tel.png" class="w-48 h-48 mb-8"></image>
                <view class="fs-20 text-color3">电话</view>
            </view>
        </view>
        <view class="f ai-f-s jc-s-b mt-32">
            <view>
                <view class="fs-26 text-color4"> 周一至周六 10:00-14:00/16:00-20:00 </view>
                <view class="f ai-c mt-8">
                    <image src="../../static/logo.png" class="w-24 h-24 mr-10"></image>
                    <view class="fs-26 text-color3">距离你1.6km</view>
                </view>
            </view>
            <view class="f fd-c ai-c">
                <image src="http://cwht.ricecs.cn/app/shop/location.png" class="w-48 h-48 mb-8"></image>
                <view class="fs-20 text-color3">去这里</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
const list = [
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
];
const currentNum = ref(0);
const getCurrentNum = (e: any) => {
    currentNum.value = e.current;
};
</script>
<style lang="scss" scoped>
.info {
    background: #ffffff;
    border-radius: 0 0 24rpx 24rpx;
    .time {
        border-bottom: 1px solid #f0f0f0;
    }
    .type {
        background: #f0f2f5;
        color: #5769a0;
    }
    .current-num {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
    }
}
</style>
